<template>
  <basePage :show-tabbar="false" :page-params="pageParams">
    <view v-if="type == 'success'" class="base">
      <text class="image2 font_family icon-chenggong_tongyong_1 " />
      <view class="confirm-title">订单确认成功</view>
      <view class="confirm-info">
        恭喜您，您的订单{{ orderNo }}已确认成功，可在【我的订单】继续跟进订单状态
      </view>
      <button class="button" :plain="true" @click="goOrderListFn">
        我的订单
      </button>
    </view>
    <view v-else-if="type == 'error'" class="base">
      <text class="image font_family icon-jinggao_tongyong_1" />
      <view class="confirm-title">订单确认失败</view>
      <view class="confirm-info confirm-fail-info">
        <!--        您的账期余额不足，请与销售人员联系-->
        {{ msg }}
      </view>
      <button class="button contact-btn" :plain="true" @click="callPhoneFn">
        <icon class="tel-icon" /> 联系销售
      </button>
    </view>
    <view v-else class="base">
      <text class="image font_family icon-jinggao_tongyong_1" />
      <view class="confirm-title">参数传递异常</view>
      <view class="confirm-info confirm-fail-info">
        {{ msg }}
      </view>
      <button class="button contact-btn" :plain="true" @click="callPhoneFn">
        <icon class="tel-icon" /> 联系销售
      </button>
    </view>
  </basePage>
</template>

<script>
import basePage from '@/components/base-page';
export default {
  name: 'ConfirmResult',
  components: {
    basePage
  },
  data() {
    return {
      orderNo: '',
      phoneNum: '',
      pageParams: {
        state: null,
        emptyTitle: '',
        errorTitle: '',
        showButton: false
      },
      type: '',
      msg: '', // 支付确认失败信息
    }
  },
  onLoad(option) {
    this.type = option.type
    this.orderNo = option.orderNo
    this.phoneNum = option.phoneNumber
    this.msg = option.msg
  },
  methods: {
    goOrderListFn() {
      uni.redirectTo({
        url: '/pages/order/moreOrder'
      });
    },
    callPhoneFn() {
      uni.makePhoneCall({
        phoneNumber: this.phoneNum,
        fail: (res) => {
          this.$u.toast(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.base {
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  .confirm-title{
    margin-top: 52rpx;
    font-size:$uni-font-size-lg;
  }
  .confirm-info{
    width: 600rpx;
    height: 40px;
    opacity: 0.5;
    margin-top: 14rpx;
    color:$uni-text-color;
    font-size:$uni-font-size-base;
  }
  .confirm-fail-info{
    text-align: center;
  }
  .image{
    margin-top: 136rpx;
    font-size: 128rpx;
    color: $uni-color-error;
  }
  .image2{
    display: block;
    margin: 136rpx auto 0;
    font-size:140rpx;
    text-align: center;
    color: $uni-color-success;
  }
  .button {
    width: 588rpx;
    margin-top: 116rpx;
    align-items: center;
    justify-content: center;
    display: flex;
    height: 88rpx;
    border: 0;
    font-size:$uni-font-size-lg;
    background-color:$uni-orange;
    color:$uni-text-color-inverse;
    border-radius:$uni-border-radius-base;
  }
  .contact-btn{
    background: #474747;
  }
  .tel-icon{
    background:url("../../static/image/tel-sale.png") no-repeat 0 0/100%;
    width: 24rpx;
    height: 26rpx;
    position: relative;
    margin-right: 10rpx;
    top:2rpx;
  }
}
</style>
